package com.kotlin.demo.ui

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun viewPagerLikeComponent() {
    var selectedTabIndex by remember { mutableStateOf(0) }
    var page1Visible by remember { mutableStateOf(true) }
    var page2Visible by remember { mutableStateOf(false) }
    var page3Visible by remember { mutableStateOf(false) }
    val tabs = listOf("Home", "Favorite", "Settings")
    val icons = listOf(Icons.Filled.Home, Icons.Filled.Favorite, Icons.Filled.Settings)

    Column(modifier = Modifier.fillMaxSize()) {
        TabRow(
            selectedTabIndex = selectedTabIndex,
            backgroundColor = MaterialTheme.colors.primary,
            modifier = Modifier.fillMaxWidth()
        ) {
            tabs.forEachIndexed { index, tab ->
                Tab(
                    selected = index == selectedTabIndex,
                    onClick = {
                        selectedTabIndex = index
                        page1Visible = selectedTabIndex == 0
                        page2Visible = selectedTabIndex == 1
                        page3Visible = selectedTabIndex == 2
                    },
                    text = { Text(text = tab) },
                    icon = { Icon(imageVector = icons[index], contentDescription = tab) }
                )
            }
        }
        Box(modifier = Modifier.fillMaxSize()) {
            this@Column.AnimatedVisibility(
                visible = page1Visible,
                modifier = Modifier.align(Alignment.Center),
                enter = fadeIn(animationSpec = tween(durationMillis = 500)),
                exit = fadeOut(animationSpec = tween(durationMillis = 500))
            ) {
                Text(
                    text = "界面1",
                    modifier = Modifier.padding(top = 16.dp)
                )
            }
            this@Column.AnimatedVisibility(
                visible = page2Visible,
                modifier = Modifier.align(Alignment.Center),
                enter = fadeIn(animationSpec = tween(durationMillis = 500)),
                exit = fadeOut(animationSpec = tween(durationMillis = 500))
            ) {
                Text(
                    text = "界面2",
                    modifier = Modifier.padding(top = 16.dp)
                )
            }
            this@Column.AnimatedVisibility(
                visible = page3Visible,
                modifier = Modifier.align(Alignment.Center),
                enter = fadeIn(animationSpec = tween(durationMillis = 500)),
                exit = fadeOut(animationSpec = tween(durationMillis = 500))
            ) {
                Text(
                    text = "界面3",
                    modifier = Modifier.padding(top = 16.dp)
                )
            }
        }

    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MyLayout() {
    var text by remember { mutableStateOf("") }
    val shape = RoundedCornerShape(8.dp)
    Box(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.White)
        ) {
            TopBar()
            // Add other components here
            BottomBar()
            Box(
                modifier = Modifier.padding(0.dp).border(1.dp, Color.Black, shape)
            ) { Text(text = "输出多语言文件路径：", fontSize = 14.sp) }
            OutlinedTextField(
                value = text,
                singleLine = true,
                onValueChange = { text = it },
                placeholder = { Text("输出多语言文件路径", style = TextStyle(fontSize = 14.sp)) },
//                label = { Text("输出多语言文件路径", style = TextStyle(fontSize = 14.sp)) },
//                    shape = shape,
//                    colors = TextFieldDefaults.textFieldColors(
//                        backgroundColor = Color.White, // 设置 TextField 的背景颜色
//                        focusedIndicatorColor = Color.Transparent, // 聚焦时的指示器颜色设为透明
//                        unfocusedIndicatorColor = Color.Transparent, // 未聚焦时的指示器颜色设为透明
//                    ),
                textStyle = TextStyle(fontSize = 14.sp, lineHeight = TextUnit.Unspecified), // 设
                modifier = Modifier
                    .fillMaxWidth().padding(0.dp) // 使 TextField 填满其父组件的宽度
//                    .padding(16.dp) // 为 TextField 添加一些内边距
            )
            Box(
                modifier = Modifier
                    .size(200.dp)
                    .background(Color.Gray), contentAlignment = Alignment.Center
            ) {
                Text("text1", modifier = Modifier.align(Alignment.TopStart))
                Text("text2", modifier = Modifier.align(Alignment.TopEnd))
                Text("text3")
            }
            // loading dialog
            AlertDialog(
                modifier = Modifier.background(Color(0x5A000000)).fillMaxSize(),
                shape = RoundedCornerShape(8.dp),
                backgroundColor = Color.Transparent,
                onDismissRequest = { /* 处理对话框关闭事件 */ },
                text = {
                    Box(
                        contentAlignment = Alignment.Center
                    ) {
                        Card(
                            shape = RoundedCornerShape(8.dp),
                            backgroundColor = Color.White,

                            ) {
                            Column(
                                horizontalAlignment = Alignment.CenterHorizontally,
                                modifier = Modifier.padding(40.dp),
                            ) {
                                CircularProgressIndicator(modifier = Modifier.padding(bottom = 16.dp))
                                Text(
                                    text = text, style = TextStyle(fontSize = 14.sp)
                                )
                            }
                        }
                    }
                },
                buttons = {}
            )
        }

    }
}

@Composable
fun TopBar() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(88.dp)
            .background(Color(0xFFFFFFFF))
    ) {
        Image(
            painter = painterResource(resourcePath = "1.png"),
            contentDescription = null,
            contentScale = ContentScale.Fit,// 图片显示方式
            modifier = Modifier
                .width(208.dp)
                .height(58.dp)
                .padding(start = 30.dp)
        )
        Text(text = "标题")
        // Add other components here
    }
}

@Composable
fun BottomBar() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(44.dp)
            .background(Color(0xFFF1F1f1))
    ) {
        Text(
            text = "EN",
            color = Color.White,
            fontSize = 28.sp,
            modifier = Modifier
                .width(64.dp)
                .height(46.dp)
                .padding(start = 16.dp)
        )
        // Add other components here
    }
}
